let indexModule = (function () {
    let $baseBox = $('.baseBox');
    let $baseBoxText = $baseBox.find('span');
    let $baseBoxSingout = $baseBox.find('a');
    let $menuBox = $('.menuBox');
    let $navBoxList = $('.navBox > a');
    let $itemBoxList = null;
    let $iframeBox = $('#iframeBox');

    // 基于发布订阅管理我们获取到个人信息和权限信息后要处理的事情
    let $plan = $.Callbacks(); // 创建一个计划表

    // 显示欢迎的基本信息
    $plan.add((_, baseInfo) => {
        $baseBoxText.html(`您好，${baseInfo.name || ''}`);
        $baseBoxSingout.click(async () => {
            let result = await axios.get('/user/signout');
            if (result.code == 0) {
                // 清除之前本地缓存的数据信息
                localStorage.clear();
                window.location.href = 'login.html';
                return;
            }
            alert('小主，当前网络繁忙，您稍后再试试~~');
        });
    });

    // 权限处理(控制左侧MENU的渲染内容)
    $plan.add((power, _) => {
        let str = ``;

        if (power.split('|').includes('userhandle')) {
            str += `<div class="itemBox" text="员工管理">
                <h3>
                    <i class="iconfont icon-yuangong"></i>
                    员工管理
                </h3>
                <nav class="item">
                    <a href="page/userlist.html" target="iframeBox">员工列表</a>
                    <a href="page/useradd.html" target="iframeBox">新增员工</a>
                </nav>
            </div>`;
        }

        if (power.split('|').includes('departhandle')) {
            str += `<div class="itemBox" text="部门管理">
                <h3>
                    <i class="iconfont icon-guanliyuan"></i>
                    部门管理
                </h3>
                <nav class="item">
                    <a href="page/departmentlist.html" target="iframeBox">部门列表</a>
                    <a href="page/departmentadd.html" target="iframeBox">新增部门</a>
                </nav>
            </div>`;
        }

        if (power.split('|').includes('jobhandle')) {
            str += `<div class="itemBox" text="职务管理">
                <h3>
                    <i class="iconfont icon-zhiwuguanli"></i>
                    职务管理
                </h3>
                <nav class="item">
                    <a href="page/joblist.html" target="iframeBox">职务列表</a>
                    <a href="page/jobadd.html" target="iframeBox">新增职务</a>
                </nav>
            </div>`;
        }

        if (power.indexOf('customer') > -1) {
            str += `<div class="itemBox" text="客户管理">
                <h3>
                    <i class="iconfont icon-kehuguanli"></i>
                    客户管理
                </h3>
                <nav class="item">
                    <a href="page/customerlist.html?lx=my" target="iframeBox">我的客户</a>
                    ${power.split('|').includes('customerall') && `<a href="page/customerlist.html?lx=all" target="iframeBox">全部客户</a>`}
                    <a href="page/customeradd.html" target="iframeBox">新增客户</a>
                </nav>
            </div>`;
        }

        $menuBox.html(str);
        $itemBoxList = $menuBox.find('.itemBox');
    });

    // 权限管理（控制组织结构和客户管理点击切换）
    function handleGroup(index) {
        // 先把ITEMBOX分组 $group1 客户管理 / $group2 组织结构
        let $group1 = $itemBoxList.filter((_, item) => {
            let text = $(item).attr('text');
            return text === "客户管理";
        });
        let $group2 = $itemBoxList.filter((_, item) => {
            let text = $(item).attr('text');
            return /^(员工管理|部门管理|职务管理)$/.test(text);
        });

        if (index === 0) {
            // $group1.css('display', 'block');
            // $group2.css('display', 'none');
            $group1.show();
            $group2.hide();
        } else if (index === 1) {
            // $group1.css('display', 'none');
            // $group2.css('display', 'block');
            $group1.hide();
            $group2.show();
        }
    }
    $plan.add((power, _) => {
        // 控制默认显示哪一个
        let initialIndex = power.split('|').includes('customerall') ? 0 : 1;
        $navBoxList.eq(initialIndex).addClass('active')
            .siblings().removeClass('active');
        handleGroup(initialIndex);
        // 点击控制切换
        $navBoxList.click(function () {
            let $this = $(this),
                index = $this.index(),
                text = $this.html().trim();

            // 权限校验
            if ((text === "客户管理" && !/customer/.test(power)) || (text === "组织结构" && !/(userhandle|departhandle|jobhandle)/.test(power))) {
                alert('小主，您无权限访问改操作，请先联系系统管理员~~');
            }

            if (index == initialIndex) return;
            $(this).addClass('active');
            $navBoxList.eq(initialIndex).removeClass('active');
            initialIndex = index;
            handleGroup(initialIndex);
        });

    });

    // 权限处理（控制默认IFRAME嵌套的页面）
    $plan.add(power => {
        let url = 'page/customerlist.html?lx=my';
        if (power.split('|').includes('customer')) {
            url = 'page/userlist.html';
        }
        $iframeBox.attr('src', url);
    });

    return {
        async init() {
            // 1.验证当前用户是否登录
            let result = await axios.get('/user/login');
            if (result.code != 0) {
                // 未登录
                alert('小主，您还没有登录，请您先登录~~');
                window.location.href = 'login.html';
                return;
            }
            // 2.获取登录用户的权限信息和个人信息(并行，相互间没有依赖)
            let [power, baseInfo] = await axios.all([
                axios.get('/user/power'),
                axios.get('/user/info')
            ]);

            console.log(power, baseInfo);
            // 权限
            power.code == 0 ? power = power.power : null;
            // 基本信息
            baseInfo.code == 0 ? baseInfo = baseInfo.data : null;

            /* 真实项目中，部分玩家会把获取的信息存储到本地 
             * 【优势】
             * 1. 以后跳转到当前项目的其他页面，如果需要用到这些信息，只需要从本地获取即可
             *   无需再重新向服务器发送请求获取了（减少了请求的次数）
             * 2. 对于权限信息和个人信息，是短时间之内无法经常更新的数据，所以可以借助本地存储做临时数据缓存
             * （设定1MIN, 一分钟之内重新刷新页面，依然获取的是本地存储的信息，无需要再从服务器获取）
             * 
             * 【弊端】
             * 1. 本地存储的信息都是明文存储，这样用户可以基于修改本地信息，恶意篡改权限或者基本信息，
             * 导致信息的泄露或者安全问题 => 在Vue/React项目中，我们可以把信息存储到vuex/redux中，
             * 这样既可以保留本地存储的好处，也能防止用户自己更改
             * 2. 如果本地做了数据缓存（1MIN）,当用户信息或者权限修改后，可能导致本地的数据依然是之前的，
             * 而且当用户重新退出登录，再进入首页，我们按理应该是重新获取最新用户的信息，而不是之前用户的信息。
             * 但是如果是本地获取，很可能获取的还是上一个用户的信息：=> 在退出登录的时候（或者重新登录的时候）
             * 我们应该把之前存储的信息都删除掉，当用户信息发生更改，应该让用户重新退出登录...
            */

            // 3.通知计划表中的任务执行
            $plan.fire(power, baseInfo);
        }
    }
})();

indexModule.init();